<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
            流：
            普通流、
            浮动流(float)：(没有脱离文本流)包裹性、块状化、向上性
            定位流(position):完全脱离普通流
        */
        /* 重置样式 */
        *{padding: 0;margin: 0;}
        li{list-style: none;}
        a{text-decoration: none;}
        /* 伪元素 ::after  ::before */
        .clear::after{
            content: '';
            display: block;
            clear: both;
        }

        .box{
            width: 600px;
            height: 300px;
            overflow: hidden;
            margin: 30px auto;
            border: 3px solid #f00;
            position: relative;
        }
        .box .nav{
            position: absolute;
            left: 50%;
            margin-left: -16px;
            bottom: 30px;
        }
        .arrow{
            position: absolute;
            top: 100px;
            width: 60px;
            height: 50px;
            display: block;
            background-color: #999;
            color: #fff;
            line-height: 50px;
            
        }
        .arrow-left{
            left: -25px;
            border-radius: 25px;
            text-indent: 30px;
        }
        .arrow-right{
            right: -25px;
            text-indent: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <div>a b c d world</div>
        <span class="arrow arrow-left"><</span>
        <span class="arrow arrow-right">></span>
        <span class="nav">hello</span>
    </div>
</body>
</html>

